<template>
    <el-drawer :title="title" :visible.sync="visible" close-on-press-escape direction="btt" size="70%">
        <el-tabs v-model="activeName" type="card" @tab-click="tabHandle">
            <el-tab-pane label="分配组织" name="first">
                <org-tab ref="orgtab" v-if="orgtabVisible"></org-tab>
            </el-tab-pane>
            <el-tab-pane label="分配职责" name="second">
                <responsibility-tab ref="resptab" v-if="resptabVisible"></responsibility-tab>
            </el-tab-pane>
            <el-tab-pane label="关联用户" name="third" v-if="isAuth()">
                <user-tab ref="usertab" v-if="usertabVisible"></user-tab>
            </el-tab-pane>
        </el-tabs>
    </el-drawer>
</template>
<script>
    // 关联用户
    import UserTab from './authorize-tab/user-tab'
    // 关联职责
    import ResponsibilityTab from './authorize-tab/responsibility-tab'
    // 关联组织
    import OrgTab from './authorize-tab/org-tab'
    export default {
        data() {
            return {
                title: '管理角色授权',
                visible: false,
                usertabVisible: false,
                resptabVisible: false,
                orgtabVisible: false,
                userRoleForm: {
                    roleId: '',
                    pkGroup: ''
                },
                gridData: [],
                activeName: 'first',
            }
        },
        components: {
            UserTab,
            ResponsibilityTab,
            OrgTab
        },
        methods: {
            init(pkGroup,pkOrg,id) {
                this.visible = true
                this.userRoleForm.roleId = id
                this.userRoleForm.pkOrg = pkOrg
                this.userRoleForm.pkGroup = pkGroup
                this.orgtabVisible = true
                this.activeName = 'first'
                this.$nextTick(() => {
                    // 初始加载授权组织
                    this.$refs.orgtab.init(this.userRoleForm.pkGroup,this.userRoleForm.roleId);
                })
            },

            // 切换页签
            tabHandle(tab, event) {
                if (tab.index == '2') {
                    this.usertabVisible = true
                    this.$nextTick(() => {
                        this.$refs.usertab.init(this.userRoleForm.pkGroup,this.userRoleForm.pkOrg,this.userRoleForm.roleId);
                    })
                }
                if (tab.index == '1') {
                    this.resptabVisible = true
                    this.$nextTick(() => {
                        this.$refs.resptab.init(this.userRoleForm.pkGroup,this.userRoleForm.pkOrg,this.userRoleForm.roleId);
                    })
                }
                if (tab.index == '0') {
                    this.orgtabVisible = true
                    this.$nextTick(() => {
                        this.$refs.orgtab.init(this.userRoleForm.pkGroup,this.userRoleForm.roleId);
                    })
                }
            },


        }
    }
</script>
<style scoped>
    .drawer-header {
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        height: 36px;
        line-height: 36px;
    }
</style>